/<template>
  <div class="drawer-box-wrapper right-box" v-show="visiable">
    <main class="taskCase_container">
      <h2>需求列表</h2>
      <header class="flex flex-between">
        <div class="aside">
          <el-form
            :inline="true"
            :model="queryParams"
            class="demo-form-inline"
            size="small"
          >
            <el-form-item label="需求编号：">
              <el-input
                v-model="queryParams.xqid"
                v-no-space
                placeholder="请输入需求编号"
              ></el-input>
            </el-form-item>
            <el-form-item label="需求名称：">
              <el-input
                v-model="queryParams.xqmc"
                v-no-space
                placeholder="请输入需求名称"
              ></el-input>
            </el-form-item>
            <el-form-item label="时间区间：">
              <el-date-picker
                v-model="timeRange"
                type="datetimerange"
                range-separator="至"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="handleTimeRangeChange"
              >
              </el-date-picker>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="aside">
          <el-form :inline="true" class="demo-form-inline" size="small">
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                @click="handleStartPlanning"
                >可见性计算</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </header>
      <main class="table_container">
        <el-table
          v-loading="tableLoading"
          :data="tableData"
          style="width: 100%"
          stripe
          class="mainTable"
          height="40vh"
          @selection-change="tableSelectionChange"
          ref="rightMultipleTable"
        >
          <el-table-column type="expand">
            <template slot-scope="props">
              <el-table
                :data="tableData[props.$index].gcxqPointList"
                style="width: 100%"
              >
                <el-table-column label="序号" width="80" type="index" />
                <el-table-column
                  show-overflow-tooltip
                  label="目标编号"
                  prop="mbbh"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="经度"
                  prop="pointJd"
                />
                <el-table-column
                  show-overflow-tooltip
                  label="纬度"
                  prop="pointWd"
                />
              </el-table>
            </template>
          </el-table-column>

          <el-table-column type="selection" width="50"> </el-table-column>
          <el-table-column label="序号" type="index" width="50">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="需求名称" prop="xqmc" />
          <el-table-column show-overflow-tooltip label="需求编号" prop="xqid" />
          <el-table-column show-overflow-tooltip label="任务类型" prop="rwlx">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="目标形态" prop="mbxt">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="气象条件" prop="qxtj">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="攻击因素" prop="gjys">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="是否合作目标"
            prop="sfhzmb"
          >
          </el-table-column>
          <el-table-column show-overflow-tooltip label="载荷类型" prop="zhlx">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="工作模式" prop="gzms">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="分辨率(m)" prop="fbl">
          </el-table-column>
          <el-table-column show-overflow-tooltip label="优先级" prop="yxj">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            label="需求开始时间"
            prop="xqkssj"
          />
          <el-table-column
            show-overflow-tooltip
            label="需求结束时间"
            prop="xqjssj"
          />
        </el-table>
      </main>
      <footer class="fl_row_start">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="queryParams.pageCurrent"
          :page-size="queryParams.pageSize"
          layout="prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </footer>
    </main>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import {
  GetPlanTasksList,
  DeletePlanTasks,
  GetPlanAlgorithm
} from '@/api/decisionManage/index.js'
export default {
  components: {},
  data() {
    return {
      visiable: false,
      queryParams: {
        pageCurrent: 1,
        pageSize: 10,
        xqmc: '',
        xqid: '',
        startTime: '',
        endTime: ''
      },
      total: 0,
      options: [
        {
          value: '值1',
          label: '选项1'
        },
        {
          value: '值2',
          label: '选项2'
        }
      ],
      tableData: [],
      currentPage3: 5,
      dialogVisible: false,
      importVisible: false,
      labelPosition: 'right',
      formLabelAlign: {
        name: '',
        region: '',
        type: ''
      },
      taskCaseBool: 0,
      tableLoading: false,
      tableSelect: [],
      relayParam: [],
      LoadingTask: '',
      timeRange: []
    }
  },
  watch: {
    visiable(val) {
      if (val) {
        this.GetPlanTasksList()
      }
    }
  },
  mounted() {
    this.$bus.$on('normalAction', bool => {
      this.visiable = bool
      this.setrightvisible(bool)
      this.GetPlanTasksList()
    })
    // 监听左侧弹窗是否自动化触发
    this.$bus.$on('automationAction', flag => {
      GetPlanTasksList().then(response => {
        this.tableData = response.data.data.records
        this.total = response.data.data.total
        // 显示右侧弹窗，并同步按钮的位置样式
        this.visiable = flag
        this.setrightvisible(this.visiable)
        // 默认选中第一个，并调用开始筹划
        this.tableSelect = [this.tableData[0]] // 不做多余的判断，对象外直接套数组
        this.handleStartPlanning(true)
      })
    })
  },
  methods: {
    ...mapActions({
      setrightvisible: 'drawer/setrightvisible'
    }),

    // 处理时间
    handleTimeRangeChange(time) {
      if (time != null) {
        this.queryParams.startTime = time[0]
        this.queryParams.endTime = time[1]
      } else {
        this.queryParams.startTime = null
        this.queryParams.endTime = null
      }
    },
    // 决策选择
    tableSelectionChange(val) {
      this.tableSelect = val
      if (val.length > 1) {
        val.forEach(key => {
          if (key !== val[val.length - 1]) {
            this.$refs.rightMultipleTable.toggleRowSelection(key, false)
          }
        })

        this.$refs.rightMultipleTable.clearSelection()
        this.$refs.rightMultipleTable.toggleRowSelection(
          val[val.length - 1],
          true
        )
      }
    },

    // 开始筹划
    handleStartPlanning(event = false) {
      if (this.tableSelect.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择需求'
        })
        return
      }
      if (event !== true) {
        this.LoadingTask = this.$loading({
          lock: true,
          text: '正在进行可见性计算',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
      }

      localStorage.setItem('xqid', this.tableSelect[0].xqid)
      // 这么做的原因是因为，在算法参数中，需要将gcxqPointList这个字段单独拿出来，
      this.$set(this, 'relayParam', this.tableSelect[0].gcxqPointList)

      // 将gcxqPointList这个字段删除掉
      let ProperitesData = this.tableSelect[0]
      delete ProperitesData.gcxqPointList
      delete ProperitesData.startTime
      delete ProperitesData.endTime

      // 算法接口需要此字段，所以可自定义为当前的id
      ProperitesData.xqbh = ProperitesData.xqid
      // 定义参数
      const znjcJsonStr = {
        targets: this.relayParam.map(item => {
          return {
            mbbh: item.mbbh,
            wd: item.pointWd,
            jd: item.pointJd
          }
        }),
        Properties: ProperitesData
      }

      GetPlanAlgorithm({
        znjcJsonStr: JSON.stringify(znjcJsonStr).replace(/\"/g, "'"),
        mxID: ProperitesData.xqid // 需求ID
      }).then(response => {
        if (response.data.code !== 200) {
          this.$message({
            type: 'error',
            message:
              event == true ? '自动化流程异常，请刷新页面重试' : '操作失败'
          })
          return false
        }
        this.$message({
          type: 'success',
          message: '操作成功,请在元任务列表中查看'
        })

        if (event !== true) {
          this.LoadingTask.close()
        }
        // 无论是否自动化，这个方法都要触发，因为元任务需要这两个参数
        this.$bus.$emit('automationActionBottom', {
          tjTime: response.data.data,
          xqbh: ProperitesData.xqid,
          flag: event == true ? true : false
        })
        this.visiable = false
        this.setrightvisible(this.visiable)
      })
    },
    // 查询
    onSubmit() {
      this.queryParams.pageCurrent = 1
      this.GetPlanTasksList()
    },
    // 重置
    onReset() {
      this.timeRange = null
      this.queryParams.xqmc = ''
      this.queryParams.xqid = ''
      this.queryParams.startTime = ''
      this.queryParams.endTime = ''
      this.queryParams.pageCurrent = 1
      this.GetPlanTasksList()
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      this.queryParams.pageCurrent = val
      this.GetPlanTasksList()
    },
    /** 获取任务筹划 */
    GetPlanTasksList() {
      this.tableLoading = true
      GetPlanTasksList(this.queryParams).then(response => {
        if (response.data.code == 200) {
          this.tableData = response.data.data.records
          this.total = response.data.data.total
        } else {
          this.$message({
            type: 'error',
            message: '获取失败'
          })
        }
        this.tableLoading = false
      })
    },

    /** 删除任务筹划 */
    DeletePlanTasks(row) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const idParam = {
            ids: [row.id]
          }
          DeletePlanTasks(idParam).then(response => {
            if (response.data.code == 200) {
              this.$message({
                type: 'success',
                message: '删除成功'
              })
              this.GetPlanTasksList()
            } else {
              this.$message({
                type: 'error',
                message: '删除失败'
              })
            }
          })
        })
        .catch(() => {
          console.log('Cancel')
        })
    }
  },
  beforeDestroy() {
    this.$bus.$off('automationAction')
    this.$bus.$off('normalAction')
  }
}
</script>

<style scoped>
::v-deep .el-table .el-table__header-wrapper .el-table__header th .el-checkbox {
  display: none;
}
</style>
